home *** CD-ROM | disk | FTP | other *** search
/ Nikkei Mac 20 / NIKKEI-MAC-CD-VOL-20-1998-12.ISO.7z / NIKKEI-MAC-CD-VOL-20-1998-12.ISO / オンラインソフト / 9.ウェブ作成ツール / PageSpinner / PageSpinner 2.01.sit / PageSpinner 2.0.1 / Examples / JavaScript / Timer Example < prev    next >
Text File  |  1996-07-06  |  5KB  |  175 lines
  1. <HTML><HEAD>
  2. <TITLE>JavaScript Timer</TITLE>
  3.  
  4. <SCRIPT LANGUAGE="JavaScript">
  5. <!-- Beginning of JavaScript --------
  6. /* 
  7.     JavaScript Timer
  8.     Written by Jerry Aman, Optima System, June 1, 1996.
  9.     Part of the PageSpinner distribution.
  10.  
  11.     Portions based upon the JavaScript setTimeout example at:
  12.     http://home.netscape.com/eng/mozilla/Gold/handbook/javascript/
  13.  
  14.     We will not be held responsible for any unwanted 
  15.     effects due to the usage of this script or any derivative.  
  16.     No warrantees for usability for any specific application are 
  17.     given or implied.
  18.  
  19.     You are free to use and modify this script,
  20.     if the credits above are given in the source code
  21. */
  22.  
  23. var    timerID = null
  24. var    timerRunning = false
  25. var    startDate
  26. var    startSecs
  27.  
  28. function stopclock()
  29. {
  30.     if(timerRunning)
  31.         clearTimeout(timerID)
  32.         timerRunning = false
  33. }
  34.  
  35. function startclock()
  36. {
  37.     startDate = new Date()
  38.     startSecs = (startDate.getHours()*60*60) + (startDate.getMinutes()*60) 
  39.                         + startDate.getSeconds()
  40.  
  41.     stopclock()
  42.     showtime()
  43. }
  44.  
  45.  
  46. /*    -------------------------------------------------
  47.     showtime()
  48.     Puts the amount of time that has passed since 
  49.     loading the page into the field named timerField in 
  50.     the form named timeForm 
  51.     -------------------------------------------------    */
  52.  
  53. function showtime()
  54. {
  55.     // this doesn't work correctly at midnight...
  56.  
  57.     var now = new Date()
  58.     var nowSecs = (now.getHours()*60*60) + (now.getMinutes()*60) + now.getSeconds()
  59.     var elapsedSecs = nowSecs - startSecs;
  60.  
  61.     var hours = Math.floor( elapsedSecs / 3600 )
  62.     elapsedSecs = elapsedSecs - (hours*3600)
  63.  
  64.     var minutes =     Math.floor( elapsedSecs / 60 )
  65.     elapsedSecs = elapsedSecs - (minutes*60)
  66.  
  67.     var seconds = elapsedSecs
  68.  
  69.     var timeValue = "" + hours
  70.     timeValue  += ((minutes < 10) ? ":0" : ":") + minutes
  71.     timeValue  += ((seconds < 10) ? ":0" : ":") + seconds
  72.  
  73.         // Update display
  74.     document.timerForm.timerField.value = timeValue 
  75.     timerID = setTimeout("showtime()",1000)
  76.     timerRunning = true
  77. }
  78.  
  79. /*    -------------------------------------------------
  80.     GetReward
  81.     Here you decide what to do depending upon
  82.     how long the user has waited 
  83.     In this case we display an alert and set the
  84.     HREF property of theLink to another page
  85.  
  86.     Immortal statements by Groucho Marx, 1890-1977
  87.     -------------------------------------------------    */
  88. function GetReward(theLink)
  89. {
  90.     var msgString;
  91.  
  92.     var now = new Date()
  93.     var nowSecs = (now.getHours()*60*60) + (now.getMinutes()*60) + now.getSeconds()
  94.     var elapsedSecs = nowSecs - startSecs;
  95.  
  96.     theLink.href = "groucho.html" // page to go
  97.  
  98.     if ( elapsedSecs > 70)     // After 70 secs
  99.         msgString =  "Time flies like an arrow.  Fruit flies like a banana."
  100.     else
  101.  
  102.     if ( elapsedSecs > 50) // After 50 secs
  103.         msgString = "I've had a perfectly wonderful evening.  But this wasn't it."
  104.     else
  105.  
  106.     if ( elapsedSecs > 30) // After 30 secs
  107.         msgString =  "Those are my principles. If you don't like them I have others."
  108.     else 
  109.     {
  110.         msgString = ("Sorry, no reward yet...")
  111.         theLink.href = "#" // Don't go to another page yet...
  112.     }
  113.  
  114.     window.alert(msgString);    // But let's display an alert first!
  115. }
  116.  
  117.  
  118. // -- End of JavaScript code -------------- -->
  119. </SCRIPT>
  120.  
  121. </HEAD>
  122. <BODY  onLoad="startclock()">
  123. <H1>JavaScript Timer</H1>
  124.  
  125. <B>This stationery page contains a JavaScript Timer Example</B>
  126. <P>
  127. Please note that JavaScript is currently only available in Netscape Navigator 2.0 or higher. <BR>
  128. <FONT COLOR="931B15">Do not assume that all in your audience are using a JavaScript enabled browser.</FONT>
  129. <HR>
  130. <P>
  131.  
  132. <FORM NAME="timerForm" onSubmit="0">
  133. You have been at this page for <INPUT TYPE="text" NAME="timerField" SIZE=10 VALUE ="">
  134. </FORM>
  135.  
  136. <P>
  137. Maybe it is time to collect your 
  138. <A HREF="#"
  139. onClick="GetReward(this);"
  140. onMouseOver="window.status='Oh, I cannot wait any longer!'; return true">
  141. <B>reward!</B></A>
  142. <P>
  143.  
  144. <HR>
  145. <P>
  146. <B>How to use:</B>
  147. <P>
  148. Copy all JavaScript (located in the Head section of this file) to another file. You can also use this file as a stationery. 
  149. <P>
  150. Use the following Body tag <CODE><BODY  onLoad="startclock()"></CODE> to start the timer. 
  151. <P>
  152. Use something like this inside the Body  part of your page to display the timer.
  153.  
  154. <XMP><FORM NAME="timerForm" onSubmit="0">
  155. You have been at this page for 
  156. <INPUT TYPE="text" NAME="timerField" SIZE=10 VALUE ="">
  157. </FORM>
  158. </XMP>
  159.  
  160. <HR>
  161. <P>
  162. An example on how to use the value of the timer is the link that will execute the function <CODE>GetReward(theLink)</CODE>:
  163.  
  164. <XMP>Maybe it is time to collect your 
  165. <A HREF="#"
  166. onClick="GetReward(this);"
  167. onMouseOver="window.status='Oh, I cannot wait any longer!'; return true">
  168. <B>reward!</B></A>
  169. </XMP>
  170.  
  171. You can change the action of what will happen when the viewer clicks on the link by editing the function <CODE>GetReward(theLink)</CODE>.
  172.  
  173. </BODY>
  174. </HTML>
  175.